<template>
  <div class="parent">
    <span class="icon iconfont icon-xiaoxi" @click="msgEvent"></span>
    <div class="top">
      <div class="pic">
        <div class="picHeader">
          <img src="../../assets/img/headPic.png" alt="" class="img">
        </div>
      </div>
      <div class="text">
        <span class="nameText">叫啥捏</span>
        <span class="phoneText">15012345678</span>
      </div>
    </div>
    <div class="content">
      <div @click="goDetail('personal')">
        <mt-cell is-link class="cell">
          <span slot="title" class="title">个人资料</span>
          <span slot="icon" class="icons iconfont icon-Fill1"></span>
        </mt-cell>
      </div>
      <div @click="goDetail('MyEquipment')">
        <mt-cell is-link class="cell">
          <span slot="title" class="title">我的设备</span>
          <span slot="icon" class="icons iconfont icon-Fill6"></span>
        </mt-cell>
      </div>
      <div @click="goDetail('MyBusiness')">
        <mt-cell is-link class="cell">
          <span slot="title" class="title">我的业务</span>
          <span slot="icon" class="icons iconfont icon-Fill4"></span>
        </mt-cell>
      </div>
      <div @click="goDetail('personal')">
        <mt-cell is-link class="cell">
          <span slot="title" class="title">我的问答</span>
          <span slot="icon" class="icons iconfont icon-wenda"></span>
        </mt-cell>
      </div>
      <div @click="goDetail('personal')">
        <mt-cell is-link class="cell">
          <span slot="title" class="title">意见建议</span>
          <span slot="icon" class="icons iconfont icon-Fill5"></span>
        </mt-cell>
      </div>
      <div>
        <mt-cell is-link class="cell">
          <span slot="title" class="title">当前版本</span>
          <span slot="icon" class="icons iconfont icon-Fill3"></span>
        </mt-cell>
      </div>
      <div @click="goDetail('personal')">
        <mt-cell is-link class="cell">
          <span slot="title" class="title">设 置</span>
          <span slot="icon" class="icons iconfont icon-Fill2"></span>
        </mt-cell>
      </div>
    </div>
    <footers :bottomActive='bottomActive'/>
  </div>
</template>
<script>
import Headers from '../../components/header-return'
import footers from '../../components/footer-tab'
import { Toast } from 'mint-ui'
export default {
  name: 'my',
  data () {
    return {
      title: '',
      bottomActive: 3
    }
  },
  components: {
    Headers,
    footers
  },
  methods: {
    goDetail (key) {
      if (key === 'MyEquipment' || key === 'MyBusiness') {
        this.$router.push({
          path: '/' + key
        })
      } else {
        Toast({
          message: '当前版本不可执行此操作，请联系4006-506-803开通正式版本',
          position: 'middle',
          duration: 2000
        })
      }
    },
    msgEvent () {
      this.$router.push({
        path: '/msg'
      })
    }
  }
}
</script>
<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  background: #f9f9f9;
}
.top{
  width: 100%;
  height: 180px;
  padding-top: 40px;
  background-image: url('../../assets/img/bg.png');
  background-size: 100% 100%;
  border-bottom: 1px solid #eee;
}
.icon{
  position: fixed;
  top: 10px;
  right: 20px;
  font-size: 18px;
  color: #fff;
}
.title{
  font-size:16px;
  font-family:PingFangSC-Regular;
  font-weight:400;
  color:rgba(51,51,51,1);
}
.pic{
  width: 100%;
  height: 85px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  .picHeader{
    width: 82px;
    height: 82px;
    border-radius: 100%;
    .img{
      width: 100%;
      height: 100%;
      border-radius: 100%;
      border: 1px solid #fff;
    }
  }
}
.text{
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .phoneText {
    font-size:12px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
  }
  .nameText{
    font-size:14px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
  }
}
.cell{
  width: 100%;
  height: 35px;
  border-bottom: 1px solid #eee;
  .iconPic{
    width: 20px;
    height: 20px;
    border-radius: 100%;
  }
  .icons{
    font-size: 18px;
    color: #3496F8;
  }
}
</style>
